<template>
	<view v-if="shop">
		 <u-swiper :list="shop.banner" height="390" :effect3d="true" effect3d-previous-margin="30"></u-swiper>
		 <view class="shop">
		 	<view class="title text-cut-2">
				{{shop.title}}
				<text>营业中</text> 
			</view>
			<!-- <view class="score flex justify-start align-center">
				<uni-rate readonly :allowHalf="true" :max="5" :value="shop.comment.score"
					:size="16" color="#CCCCCC" active-color="#f00" />
				<text>{{shop.comment.score}}</text>
				<text>{{shop.comment.count}}条评论</text>
			</view> -->
			
			<view class="baozhang flex justify-start align-center flex-wrap">
				<template v-if="shop.tags">
					<text v-for="(a,b) in shop.tags.split(',')">{{a}}</text>
				</template>
			</view>
			
			<view class="time">
				<text>服务时间</text>
				<text>{{shop.serve_time}}</text>
			</view>
			<view class="equitys flex justify-between align-center">
				<view class="q flex justify-start align-center flex-sub">
					<image src="/static/img/baozhang1.png" mode="widthFix"></image>
					<text>保障信息</text>
				</view>
				<view class="flex justify-end align-center" @tap="show = !show">
					<view class="equitys-item flex justify-end align-center" v-for="(a,b) in shop.equitysList" v-if="b<2">  <image src="/static/img/choose.png" mode="widthFix"></image><text>{{a.title}}</text> </view>
					<text class="wlIcon-fanhui2"></text>
					
				</view>
			</view>
			
			<view class="city flex justify-between align-center">
				<view class="left">
					<view class="t flex justify-start align-center">
						<text>全{{common.addressText}}</text> <text class="tag">可服务</text>
					</view>
					<view class="" v-if="shop.city_ids_name.length > 0" @tap="show2 = !show2">
						<text class="tips">点击查看全部{{shop.city_ids_name.length}}个服务城市</text>
						<text class="wlIcon-fanhui2"></text>
					</view>
				</view>
				<view class="r flex justify-center align-center" @tap="$wanlshop.phone(shop.mobile)">
					<image src="/static/img/phone-white.png" mode="widthFix"></image>
					<text>{{shop.mobile}}</text>
				</view>
			</view>
			
			<view class="goodsList" v-if="goodsList.length > 0">
				<view class="item flex justify-start align-center" v-for="(item,index) in goodsList" :key="item.id" @tap="$wanlshop.to(`/pages/medicalcare/visit/product?id=${item.id}&shop_id=${shop_id}`)">
					<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
					<view class="info flex-sub">
						<view class="title text-cut-2">{{item.title}}</view>
						<view class="tag" v-if="item.tags">
							<text v-if="i < 2" v-for="(m,i) in item.tags.split(',')">{{m}}</text>
						</view>
						<view class="bottom">
							<text class="text-price">{{item.price}}</text>
							<text>立即预约</text>
						</view>
					</view>
				</view>
				<view @tap="$wanlshop.to('/pages/medicalcare/visit/lists?id=' + shop_id)" class="more bg-white" style="text-align: center;padding: 20rpx 0;font-size: 28rpx;color: #999;">
					查看更多
				</view>
			</view>
			
			
			<view class="comment">
				<view class="commentList">
					<view class="head">
						<view class="title">用户评价</view>
						<view class="tag">
							<text :class="{cur:state == item.id}" @tap="choose(item.id)" v-for="(item,index) in countList" :key="index">{{item.name}}({{item.count}})</text>
						</view>
					</view>
					<wanl-empty padding="0" v-if="commentList.length == 0" text="暂无评论"/>
					<view class="item" v-for="(item,index) in commentList" :key="item.id">
						<view class="user flex justify-between align-center">
							<view class="left flex justify-start align-center">
								<image :src="item.user.avatar" mode="aspectFill"></image>
								<view class="info flex flex-direction">
									<text>{{item.user.nickname}}</text>
									<uni-rate readonly :allowHalf="true" :max="5" :value="item.score" :size="16" color="#CCCCCC" active-color="#FBC300" />
								</view>
							</view>
							
							<text class="time">{{item.createtime_text}}</text>
						</view>
						<view class="content">
							<view class="text">{{item.content}}</view>
						</view>
					</view>
				</view>
			</view>
		 </view>
		 
		 <u-popup v-model="show" mode="bottom" :border-radius="20">
		 	<view class="bg-white u-popup">
		 		<text class="title">保障说明</text>
		 		<view class="list">
					<scroll-view :scroll-y="true" style="height: 800rpx;">
						<view class="item" v-for="(item,index) in shop.equitysList" :key="index">
							<view class="top">
								<image src="/static/images/medical/bookingsystem/fuwu4.png" mode="widthFix"></image>
								<text>{{item.title}}</text>
							</view>
							<view class="content">{{item.text}}</view>
						</view>
		 			</scroll-view>
		 		</view>
		 	</view>
		 </u-popup>
		 
		 <u-popup v-model="show2" mode="bottom" :border-radius="20">
		 	<view class="bg-white u-popup-city">
		 		<text class="title">商家全部服务区域</text>
		 		<view class="list">
		 			<view class="item" v-for="(item,index) in shop.city_ids_name" :key="index">
		 				<view class="top">
		 					<text>{{item}}</text>
		 				</view>
		 			</view>
		 		</view>
				<view class="b" @tap="show2 = false">知道了</view>
		 	</view>
		 </u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				show2: false,
				goodsList:[],
				shop:null,
				state:0,
				commentList:[],
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'more',
				contentText: {
					contentdown: ' ',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				
				countList:[],
				shop_id:''
			}
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(option) {
			this.shop_id = option.id;
			this.loadData(option.id)
			this.getGoods(option.id)
			this.getComment(option.id)
			this.getCommentCount(option.id)
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.getComment();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.getComment();
			}
		},
		methods: {
			async loadData(id) {
				await uni.request({
					url: '/addons/medicalvisit/api.shop/detail',
					method: 'get',
					data: {
						shop_id: id
					},
					success: res => {
						let banner = []
						let equitysList = []
						if(res.data.images) {
							res.data.images.split(',').forEach(item=>{
								banner.push({
									image:this.$wanlshop.oss(item)
								})
							})
						}
						for (let var1 in res.data.services_tag) {
							equitysList.push({
								title:var1,
								text:res.data.services_tag[var1]
							})
						}
						res.data.banner = banner
						res.data.equitysList = equitysList
						this.shop = res.data
						uni.setNavigationBarTitle({
							title:res.data.title
						})
					}
				});
			},
			async getGoods(id) {
				await uni.request({
					url: '/addons/medicalvisit/api.Product/list',
					method: 'post',
					data: {
						shop_id: id,
						type:'recommand'
					},
					success: res => {
						this.goodsList = res.data.data;
					}
				});
			},
			async getComment(id) {
				await uni.request({
					url: '/addons/medicalvisit/api.comment/lists',
					method: 'post',
					data: {
						shop_id: id || this.shop.id,
						page: this.current_page,
						state: this.state
					},
					success: res => {
						uni.stopPullDownRefresh();
						this.commentList = this.reload ? res.data.data : this.commentList.concat(res.data.data); //数据 追加
						this.total = res.data.total; //数据量
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						this.status = res.data.total == 0 ? 'noMore' : 'more';
						this.comment = res.data.data
					}
				});
			},
			choose(id){
				this.state = id
				this.current_page = 1;
				this.reload = true;
				this.getComment();
			},
			async getCommentCount(id) {
				await uni.request({
					url: '/addons/medicalvisit/api.comment/count',
					method: 'post',
					data: {
						type: 2,
						shop_id: id
					},
					success: res => {
						this.countList = res.data;
						this.state = res.data[0].id;
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	
.shop {
	padding: 30rpx 0;
	background-color: #fff;
	> .title {
		padding: 0 30rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #333;
		position: relative;
		text {
			position: relative;
			margin-left: 10rpx;
			// position: absolute;
			// right: 0;
			// bottom: 0;
			color: #66c89f;
			background-color: #e2f5f0;
			font-size: 24rpx;
			border-radius: 4rpx;
			padding: 4rpx 10rpx;
			padding-left: 30rpx;
			&::after {
				position: absolute;
				left: 10rpx;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #66c89f;
				content: "";
				top: 50%;
				margin-top: -5rpx;
			}
		}
	}
	.score {
		padding: 10rpx 30rpx;
		text {
			font-size: 28rpx;
			color: #f00;
			margin-left: 6rpx;
			&:nth-child(1) {
				font-weight: 500;
			}
			&:last-child {
				color: #999;
				padding-left: 20rpx;
				position: relative;
				margin-left: 20rpx;
				&::after {
					position: absolute;
					left: 0;
					width: 1px;
					height: 30rpx;
					background-color: #ededed;
					content: "";
					top: 50%;
					margin-top: -15rpx;
				}
			}
		}
	}
	.baozhang {
		padding: 10rpx 30rpx 20rpx 30rpx;
		text {
			color: #333;
			font-size: 24rpx;
			border: 1px solid #ededed;
			padding: 4rpx 10rpx;
			border-radius: 6rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			font-weight: 600;
		}
	}
	> .time {
		border-top: 1px solid #ededed;
		padding: 20rpx 0 0 0;
		margin: 0 30rpx;
		text {
			font-size: 28rpx;
				color: #333;
			&:nth-child(1) {
				font-weight: 600;
				color: #333;
				margin-right: 20rpx;
			}
		}
	}
	
	.equitys {
		margin: 20rpx 30rpx;
		background-color: #fdf8ed;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		color: #a7866b;
		view {
			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
				margin-right: 10rpx;
			}
			text {
				font-weight: 800;
				font-size: 28rpx;
			}
		}
		.q {
			image {
				margin-left: 0;
			}
		}
		.equitys-item {
			image {
				width: 25rpx;
				height: 25rpx;
			}
			text {
				font-weight: normal;
			}
		}
		.wlIcon-fanhui2 {
			color: #a7866b;
			font-size: 20rpx;
			margin-left: 10rpx;
		}
	}
	.city {
		margin: 30rpx 0;
		padding: 0 30rpx;
		.t {
			margin-bottom: 10rpx;
			text {
				font-size: 30rpx;
				font-weight: 800;
			}
			.tag {
				font-size: 24rpx;
				font-weight: normal;
				color: #67caa1;
				background-color: #eafef9;
				padding: 4rpx 10rpx;
				margin-left: 10rpx;
			}
		}
		.tips {
			color: #666666;
		}
		.wlIcon-fanhui2 {
			color: #666666;
			font-size: 25rpx;
			font-weight: 800;
		}
		.r {
			background-color: #e8613e;
			color: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	
	.comment {
		padding: 30rpx 30rpx 0 30rpx;
		.commentList { 
			.head {
				.title {
					height: 46rpx;
					font-size: 30rpx;
					color: #333333;
					line-height: 46rpx;
					position: relative;
					&::after {
						position: absolute;
						left: 0;
						bottom: 6rpx;
						content: "";
						display: inline-block;
						width: 120rpx;
						height: 6rpx;
						background: linear-gradient(270deg, #FFFFFF, #57B966);
						border-radius: 6rpx 0rpx 0rpx 0rpx;
					}
				}
				.tag {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 45rpx 0 30rpx 0;
					border-bottom: 1px solid #ededed;
					text {
						padding: 0 20rpx;
						margin-right: 20rpx;
						font-size: 24rpx;
						line-height: 48rpx;
						height: 48rpx;
						border-radius: 24rpx;
						background-color: #ededed;
						&.cur {
							background: rgba(87,185,102,0.1);
							color: #57B966;
						}
					}
				}
			}
			.item {
				padding: 30rpx 0 0 0;
				.user {
					.left {
						image {
							margin-right: 13rpx;
							width: 64rpx;
							height: 64rpx;
							border-radius: 50%;
						}
						.info {
							text {
								font-size: 28rpx;
								color: #333333;
								line-height: 46rpx;
							}
						}
					}
					.time {
						color: #737783;
						font-size: 26rpx;
					}
				}
				.content {
					padding: 30rpx 0 20rpx 77rpx;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
	
	.goodsList {
		background-color: #f7f7f7;
		padding: 20rpx 0;
		.item {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #f7f7f7;
			&:nth-child(1) {
				border-radius: 20rpx 20rpx 0 0;
			}
			&:last-child {
				border-radius: 0 0 20rpx 20rpx;
				border:none;
			}
			> image {
				width: 164rpx;
				height: 164rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				// height: 164rpx;
				.title {
					color: #333;
					font-size: 28rpx;
				}
				
				.tag {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 10rpx;
					text {
						color: #999;
						font-size: 20rpx;
						margin-right: 10rpx;
						border: 1px solid #ededed;
						border-radius: 6rpx;
						padding: 2rpx 10rpx;
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.text-price {
						color: #FD5502;
						font-size: 36rpx;
					}
					text {
						&:last-child {
							width: 180rpx;
							height: 72rpx;
							background: #57B966;
							border-radius: 20rpx;
							line-height: 72rpx;
							text-align: center;
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
}

	.u-popup {
		padding: 36rpx 34rpx;
		.title {
			display: inline-block;
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 26rpx;
		}
		.list {
			.item {
				margin-bottom: 30rpx;
				&:last-child {
					margin-bottom: 0;
				}
				.top {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 12rpx;
					}
					text {
						display: inline-block;
						font-size: 34rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #4CBD66;
						line-height: 48rpx;
					}
				}
				.content {
					padding-left: 52rpx;
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 30rpx;
					margin-top: 4rpx;
				}
			}
		}
	}
	.u-popup-city {
		padding: 36rpx 34rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			display: inline-block;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 26rpx;
			width: 100%;
		}
		.list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;
			.item {
				margin-right: 20rpx;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
		}
		.b {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 10rpx;
			color: #fff;
			background-color: #4CBD66;
			margin-top: 20rpx;
		}
	}
</style>
